<!--
 * @Descripttion: 招商管理 item
 * @version: 
 * @Author: lehaixia
 * @Date: 2023-04-18 10:09:18
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-05-08 15:55:29
-->
<template>
  <div class="manager-item">
    <div class="title color-black">{{ itemData.managerName }} {{ filterPhone(itemData.managerPhone) }}</div>
    <div class="content">
      <div>
        域账号：<span class="black">{{ itemData.managerAccount }}</span>
      </div>
      <div>
        修改人：<span class="black">{{ itemData.lastUpdateBy }}</span>
      </div>
      <div>
        修改时间：<span class="black">{{ itemData.lastUpdateTime }}</span>
      </div>
    </div>
    <div class="operate">
      <qmp-switch :model-value="checked" @update:model-value="onUpdateValue">
        <template #background>
          <span class="qmp-switch__background"> {{ checked ? '启用中' : '已关闭' }}</span>
        </template>
      </qmp-switch>
      <div class="edit" @click.stop="handleEdit">编辑</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Dialog } from 'qmp-component'
  import { reactive, toRefs, defineComponent, watch } from 'vue'
  import { filterPhone } from '@/utils'

  export default defineComponent({
    name: 'LeasingManagerItems',
    props: {
      itemData: {
        type: Object,
        default: () => {}
      }
    },
    setup(props, { emit }) {
      // const checked = ref(false)
      const datas = reactive({
        checked: props.itemData.enable === 1
      })

      //停用启用监听更改状态
      watch(
        () => props.itemData.enable,
        (val) => {
          datas.checked = val === 1
        },
        {
          deep: true
        }
      )

      const onUpdateValue = (newValue: any) => {
        Dialog.confirm({
          title: '提醒',
          message: !newValue ? '停用后意向客户分配时，当前招商经理将无法被分配选中，是否确认?' : '是否确认启用?'
        }).then(() => {
          // datas.checked.value = newValue
          emit('enable')
        })
      }

      const handleEdit = () => {
        emit('edit')
      }
      return {
        ...toRefs(datas),
        onUpdateValue,
        handleEdit,
        filterPhone
      }
    }
  })
</script>
<style lang="less" scoped>
  .manager-item {
    margin-bottom: 8px;
    padding: 16px;
    background: var(--bg-global-weaker);
    border-radius: 8px;
    font: var(--font-main-body);
    color: var(--texticon-default-stronger);
    .title {
      height: 20px;
      font: var(--font-main-title-strengthen);
    }
    .content {
      margin-top: 8px;
      margin-bottom: 16px;
      div {
        padding: 2px 0;
        display: flex;
        justify-content: space-between;

        font: var(--font-main-body);
        color: var(--texticon-default-stronger);
        line-height: 20px;

        .black {
          color: var(--texticon-default-strong);
        }
      }
    }

    .operate {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .edit {
        border: 1px solid var(--button-grey-noopen);
        border-radius: var(--radius-max);
        color: var(--texticon-default-strong);
        font: var(--font-control-xl);
        padding: 6px 20px;
      }
    }
  }
</style>
